<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>表单单/多选项</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript" src="js/header.js"></script>
	<h1>表单单/多选项</h1>
	<div class="intro">
		用户以单/多个选项作为选项<br />
		类型：checkbox, radio
		<div class="br"></div>
		<code title="查看结构" style="display:none">/*!
* #1 初始化前
* @note 如果您未禁用UI初始化, 应该为这样的写法
*       文档载入完成后, 自动转为#2结构
*/
<input type="radio" name="gender" value="1" checked /> <label>男</label>
<input type="radio" name="gender" value="2" /> <label>女</label>

/*!
* #2 初始化后
* @note 如果您禁用了UI, 应该按如下结构编写
*/
<div class="wsc-form a inline">
	<div class="wsc-form-wrap inline">
		<label for="wscore-form-init-0" class="wsc-form-checks-icon inline radio-on"></label>
		<input type="radio" name="gender" value="1" checked="" inited="true" id="wscore-form-init-0" class="wsc-form-checks-input" />
		<label class="wsc-form-checks-text inline" for="wscore-form-init-0">男</label>
	</div>
</div>
<div class="wsc-form a inline">
	<div class="wsc-form-wrap inline">
		<label for="wscore-form-init-1" class="wsc-form-checks-icon inline radio-off"></label>
		<input type="radio" name="gender" value="2" inited="true" id="wscore-form-init-1" class="wsc-form-checks-input" />
		<label class="wsc-form-checks-text inline" for="wscore-form-init-1">女</label>
	</div>
</div></code>
	</div>
	<script type="text/javascript" src="js/itabs.js"></script>	

	<h2>属性</h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>属性名</th>
					<th>属性值</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>form-no-ui</td>
					<td>false | true</td>
					<td>
						是否禁用UI初始化<br />
						默认：false (即: 启用)<br />
						注意：在禁用(true)时, 您需要编辑完整的HTML结构
					</td>
				</tr>
				<tr>
					<td>2</td>
					<td>required</td>
					<td></td>
					<td>至少选1项</td>
				</tr>
				<tr>
					<td>3</td>
					<td>filter-min</td>
					<td>int</td>
					<td>至少选几项</td>
				</tr>
				<tr>
					<td>4</td>
					<td>filter-max</td>
					<td>int</td>
					<td>最多选几项</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<h2>事件</h2>
	<div class="codeset">
		<code title="blur" style="display:none">/*!
* 失去焦点事件
*/
		
		// #1 HTML
<input type="checkbox" name="checkbox" value="" /> <label>Checkbox-BLur-Event</label>
// #2 
$(selector).blur()
</code>

		<div class="br"></div>
		<code title="change">// 变更
$(selector).change()</code>

		Form-Seting-Event!
	</div>
	
	
	<h2>示例</h2>
	<div class="codeset">
		<code title="禁用UI"><input form-no-ui="true" type="radio" name="radio" value="1" /><label>禁用UI</label></code>
		<div class="br"></div>
		<code title="选择2-3项">// 筛选属性需要第1个元素上定义
<input filter-min="2" filter-max="3" type="checkbox" name="checkbox[]" value="1" /><label>选项1</label>
<input type="checkbox" name="checkbox[]" value="2" /><label>选项2</label>
<input type="checkbox" name="checkbox[]" value="3" /><label>选项3</label>
<input type="checkbox" name="checkbox[]" value="4" /><label>选项4</label>
<input type="checkbox" name="checkbox[]" value="5" /><label>选项5</label></code>
	</div>
	
	<h2>DEMO</h2>
	<div class="codeset">
		<form method="post">
			<input info-pos="r" filter-min="2" filter-max="3" type="checkbox" name="checkbox[]" value="1" /><label>选项1</label><br />
			<input type="checkbox" name="checkbox[]" value="2" /><label>选项2</label><br />
			<input type="checkbox" name="checkbox[]" value="3" /><label>选项3</label><br />
			<input type="checkbox" name="checkbox[]" value="4" /><label>选项4</label><br />
			<input type="checkbox" name="checkbox[]" value="5" /><label>选项5</label>
		</form>
	</div>
	
	
<script type="text/javascript" src="../../theme/footer.js"></script>
</body>
</html>	